import React from 'react';

/**
 * onlyOffice在线编辑组件
 */
export default class OnlyOfficeOnlineEdit extends React.Component {

    constructor(props) {
        super(props);
        // userObj 与 fileObj对象 为父级组件传递
        this.state = {
            userObj: this.props.userObj,
            fileObj: this.props.fileObj,

            extsSpreadsheetArr : [".xls", ".xlsx", ".xlsm",
            ".xlt", ".xltx", ".xltm",
            ".ods", ".fods", ".ots", ".csv"],

            extsPresentationArr : [".pps", ".ppsx", ".ppsm",
            ".ppt", ".pptx", ".pptm",
            ".pot", ".potx", ".potm",
            ".odp", ".fodp", ".otp"],

            extsTextArr : [".doc", ".docx", ".docm",
            ".dot", ".dotx", ".dotm",
            ".odt", ".fodt", ".ott", ".rtf", ".txt",
            ".html", ".htm", ".mht",
            ".pdf", ".djvu", ".fb2", ".epub", ".xps"]
        };
    }

    // 生命周期函数 元素挂载之后执行
    componentDidMount() {
        let userObj = this.state.userObj;
        let fileObj = this.state.fileObj;
        if (userObj == null || fileObj == null) {
            return;
        }
        
        this.beginOnlyOfficeOnlineEdit(userObj, fileObj);
    }

    // 通过文件后缀类型获取onlyoffice的documentType属性类型，fileType 必须携带 . 符合，如：.docx .xlsx
    getDocumentTypeByFileType = (fileType) => {
        if (this.state.extsTextArr.indexOf(fileType) > -1){
            return "text";
        }
        if (this.state.extsSpreadsheetArr.indexOf(fileType) > -1){
            return "spreadsheet";
        }
        if (this.state.extsPresentationArr.indexOf(fileType) > -1){
            return "presentation";
        }
        return null;
    }

    // onlyOffice 的 js 里的主要实现方法封装
    beginOnlyOfficeOnlineEdit = (userObj, fileObj) => {
        if (userObj == null || fileObj == null) {
            return;
        }
        let { userid, username } = userObj;
        let { fileKey, fileTitle, fileUrl, fileType, isAllowOnlineEdit, documentType} = fileObj;
    
        // eslint-disable-next-line no-undef
        new DocsAPI.DocEditor("jqmkjOnlyOffice", {
            "document": {
                // 文档唯一存储key ，采用 文档路径hash 计算得到
                "key": fileKey,
                // 文档名称
                "title": fileTitle,
                //"url": "文件其他系统实际下载url"
                "url": fileUrl,
                // 文档后缀类型
                "fileType": fileType,
            },
            "documentType": documentType,
            "width": "100%",
            "height": "900px",
            "editorConfig": {
                "mode": isAllowOnlineEdit ? 'edit' : 'view', // 文档模式，文档只读不可编辑：view 、文档可编辑：edit 可用于设置用户权限
                "lang": "zh-CN",//"en-US",
                // "callbackUrl": "回调地址"
                // 这个有配置则首次会尝试连接回调，error=0 则响应成功，没则提示失败，这个地址的放回json 必须 error = 0 即与onlyoffice服务器接口回调成功 ，
                // onlyoffice会推文件流到此接口
                // "callbackUrl":"http://192.168.226.208:8805/webeditor-ajax.php?type=upload",
                "customization": {
                    "forcesave": "true"
                },
                "user": {
                    // id 与 name 必须是字符串
                    "id": userid,
                    "name": username
                },
            },
            "permissions": {
                "comment": true,
                "download": true,
                // "edit": true, /*是否可编辑*/
                "edit": true, /*是否可编辑，如果文档模式 mode 属性为 view ，是true值也是无效的，文档模式为edit，则可编辑*/
                "fillForms": true,
                "print": true,
                "review": true
            }
        });
    }

    render() {
        return (
                <div id='jqmkjOnlyOffice'></div>
        );
    }
}